<script setup>
	import { computed } from '@vue/reactivity'
	import {
		ref,
		reactive,
		watchEffect,
		provide,
		inject,
		onMounted,
		toRefs,
		watch,
	} from 'vue'

	import { useStore } from 'vuex'
	import TopNav from '../components/TopNav.vue'
	import LeftNav from '../components/LeftNav.vue'
	import StepBar from '../components/stepBar.vue'
	import UploadCom from '../components/uploadCom.vue'
	import ResultComVue from '../components/resultCom.vue'
	import { useRouter } from 'vue-router'

	// 判断类型
	const router = useRouter()
	const type = router.currentRoute.value.meta.type

	const store = useStore()

	const loadingstate = computed(() => {
		return store.state.pageStore.loadingstate
	})

	const stepIndex = computed(() => {
		return store.state.pageStore.resultInfo[type].stepIndex
	})

	const resultBase64Url = computed(() => {
		return store.state.pageStore.resultInfo[type].resultBase64Url
	})

	const loadState = computed(() => {
		return store.state.pageStore.resultInfo[type].loadState
	})

	const resultState = computed(() => {
		return store.state.pageStore.resultInfo[type].resultState
	})


	//用以监听步骤的序号来表示是否加载等待框
	onMounted(() => {
		watchEffect(() => {
			loadResults()
		})
		store.commit('pageStore/changeLoadingState', 1)
	})

	const loadResults = () => {
		if (stepIndex.value == 2) {
			store.state.pageStore.resultInfo[type].loadState = true
		}
		if (resultBase64Url.value != '') {
			store.state.pageStore.resultInfo[type].loadState = false
			store.state.pageStore.resultInfo[type].resultState = true
			store.state.pageStore.resultInfo[type].stepIndex = 3
		}
	}
</script>

<template>
	<div class="home-page">
		<transition name="top-nav">
			<div v-show="loadingstate" class="top-nav_main">
				<TopNav></TopNav>
			</div>
		</transition>
		<transition name="left-nav">
			<div v-show="loadingstate" class="body_main">
				<LeftNav></LeftNav>
				<div
					element-loading-text="加载分析结果中"
					v-loading="loadState"
					class="main-content"
				>
					<StepBar></StepBar>
					<UploadCom v-if=" !resultState"></UploadCom>
					<ResultComVue v-if=" resultState"></ResultComVue>
				</div>
			</div>
		</transition>
	</div>
</template>

<style lang="less">
	.home-page {
		overflow-x: hidden;
		overflow-y: hidden;
		width: 100vw;
		// height: 90vh;
		height: 100vh;
		> .top-nav_main {
			height: 7%;
		}
		> .body_main {
			height: 100%;
			width: 100%;
			display: flex;
			> .main-content {
				width: 88%;
				background: url(../assets/images/homePage/back.png) no-repeat;
				background-size:cover;
			}
		}
	}
	.top-nav-enter-active,
	.top-nav-leave-active {
		// transform-origin: left top;
		transition: all 1.5s;
		/* cubic-bezier(1, 0.5, 0.8, 1) */
	}

	.top-nav-enter-from,
	.top-nav-leave-to {
		visibility: none;
		transform: translateY(120%);
		opacity: 0;
	}

	.top-nav-leave-from,
	.top-nav-enter-to {
		transform: translateY(0%);
	}

	.left-nav-enter-active,
	.left-nav-leave-active {
		transition: all 1.5s;
	}

	/*
	  特别注意下面这个设置方法，与vue2不同，
	  难怪我试了半天老是只有消失有动画，
	  vue3得进入分成from和to
	*/
	.left-nav-enter-from,
	.left-nav-leave-to {
		visibility: none;
		transform: translateX(-50%);
		opacity: 0;
	}

	.left-nav-leave-from,
	.left-nav-enter-to {
		transform: translateX(0%);
	}
</style>
